import React from 'react'
import { Button, Form, Input,message } from 'antd'
import './Login.css'
import axios from 'axios'
import { useNavigate } from 'react-router-dom'

const Login = () => {
  const navigator = useNavigate()
  const onFinish = (values) => {
    axios.get(`/users?username=${values.username}&password=${values.password}&roleState=true&_expand=role`).then(res=>{
      if(res.data.length===0){
          message.error("用户名或密码不匹配")
      }else{
          localStorage.setItem("token",JSON.stringify(res.data[0]))
          navigator('/')
      }
  })
  }
  return (
    <div style={{ background: 'rgb(35, 39, 65)', height: "100%",overflow:'hidden' }}>
      <div className="formContainer">
        <h1 className="logintitle">全球新闻发布管理系统</h1>
        <Form
          name="basic"
          style={{ maxWidth: 600 }}
          onFinish={onFinish}
          className="login-form"
          labelCol={{
            span: 3,
          }}
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: '请输入用户名!' }]}
          >
            <Input placeholder="请输入用户名" />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[{ required: true, message: '请输入密码!' }]}
          >
            <Input.Password placeholder="请输入密码" />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 10, span: 2 }}>
            <Button
              type="primary"
              htmlType="submit"
              className="login-form-button"
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
export default Login
